import { reqGetHospitalShow } from "@/api/hospital/hospitalList";
import { ReqGetHospitalShowResponse } from "@/api/hospital/model/hospitalListTypes";
import { Badge, Button, Card, Descriptions } from "antd";
import React, { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";

export default function HospitalShow() {
  //获取 id 参数
  let { id } = useParams();
  //声明一个状态 保存医院详情的信息
  let [hospital, setHospital] = useState<ReqGetHospitalShowResponse | undefined>();

  //组件挂载完毕
  useEffect(() => {
    //发送请求
    reqGetHospitalShow(id as string).then((v) => {
      //设置状态
      setHospital(v);
    });
  }, [id]);

  //获得 navigate 函数
  let navigate = useNavigate();

  return (
    <Card>
      <Descriptions title="基本信息" bordered>
        <Descriptions.Item label="医院名称" labelStyle={{ width: 110 }}>
          {hospital?.hospital.hosname}
        </Descriptions.Item>
        <Descriptions.Item label="医院 logo" span={2}>
          <img width="60" src={hospital?.hospital.logoData ? "data:image/png;base64," + hospital?.hospital.logoData : ""} alt="" />
        </Descriptions.Item>

        <Descriptions.Item label="医院编码">{hospital?.hospital.hoscode}</Descriptions.Item>
        <Descriptions.Item label="医院地址" span={2}>
          {hospital?.hospital.param.fullAddress}
        </Descriptions.Item>

        <Descriptions.Item label="坐车路线" span={3}>
          {hospital?.hospital.route}
        </Descriptions.Item>

        <Descriptions.Item label="医院简介" span={3}>
          {hospital?.hospital.intro}
        </Descriptions.Item>
      </Descriptions>

      <div className="h-20"></div>

      <Descriptions title="预约规则信息" bordered>
        <Descriptions.Item label="预约周期">{hospital?.bookingRule.cycle}</Descriptions.Item>
        <Descriptions.Item label="放号时间" span={2}>
          {hospital?.bookingRule.releaseTime}
        </Descriptions.Item>

        <Descriptions.Item label="停挂时间">{hospital?.bookingRule.stopTime}</Descriptions.Item>
        <Descriptions.Item label="退号时间" span={2}>
          {hospital?.bookingRule.quitTime}
        </Descriptions.Item>

        <Descriptions.Item label="预约规则" span={3}>
          {hospital?.bookingRule.rule.map((item, index) => {
            return <p key={index}>{item}</p>;
          })}
        </Descriptions.Item>
      </Descriptions>
      <div className="h-20"></div>
      <Button
        onClick={() => {
          navigate(-1);
        }}
      >
        返回
      </Button>
    </Card>
  );
}
